<template>
  <!-- 定义k线图组件 -->
  <div id="mainbox"></div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
// 引入nextTick 方法. 语法: nextTick(()=>{可以获取状态更新后的dom})
import { nextTick } from 'vue'
export default {
  name: '',
  data() {
    return {}
  },
  props: ['kdataprop'],
  mounted() {
    // 01: 基于准备好的dom，初始化echarts实例
    // console.log('dom', document.getElementById('mainbox'))
    // console.log('数据来自于父组件', this.kdataprop)
    // console.log('this', this)

    // 方法1:
    // if (document.getElementById('mainbox')) {
    //   var myChart = echarts.init(document.getElementById('mainbox'))
    //   var option = {
    //     title: {
    //       text: 'K线图'
    //     },
    //     toolbox: {
    //       feature: {
    //         saveAsImage: {},
    //         restore: {},
    //         dataView: {},
    //         dataZoom: {},
    //         magicType: {
    //           type: ['line', 'bar', 'stack']
    //         }
    //       }
    //     },
    //     xAxis: {
    //       data: this.kdataprop.x
    //     },
    //     yAxis: {},
    //     series: [
    //       {
    //         type: 'candlestick',
    //         data: this.kdataprop.val
    //       }
    //     ]
    //   }
    //   option && myChart.setOption(option)
    // }

    //方法2:
    nextTick(() => {
      var myChart = echarts.init(document.getElementById('mainbox'))
      var option = {
        title: {
          text: 'K线图'
        },
        toolbox: {
          feature: {
            saveAsImage: {},
            restore: {},
            dataView: {},
            dataZoom: {},
            magicType: {
              type: ['line', 'bar', 'stack']
            }
          }
        },
        xAxis: {
          data: this.kdataprop.x
        },
        yAxis: {},
        series: [
          {
            type: 'candlestick',
            data: this.kdataprop.val
          }
        ]
      }
      option && myChart.setOption(option)
    })
  },
  methods: {}
}
</script>
<style scoped>
</style>